import React, { Component } from 'react';
import styles from './index.less';
import { Descriptions, Table } from 'antd';

class Historyoverdue1 extends Component {
  render() {
    const { data = {} } = this.props;
    // const columns = [
    //   { title: '序号', dataIndex: 'key' },
    //   { title: '逾期金额区间(元)', dataIndex: 'overdue_money' },
    //   { title: '逾期时间', dataIndex: 'overdue_time' },
    //   { title: '逾期时长', dataIndex: 'overdue_day' },
    //   {
    //     title: '是否结清', dataIndex: 'settlement',
    //     render: (settlement) => {
    //       return (
    //         <>
    //           {
    //             settlement === 'N' ? '否' : null
    //           }
    //           {
    //             settlement === 'Y' ? '是' : null
    //           }
    //         </>
    //       )
    //     }
    //   }
    // ];
    const customData = data && data.datalist && data.datalist.map((item, sign) => {
      const newsItem = { ...item };
      const keys = sign + 1;
      newsItem.key = keys;
      return newsItem;
    });
    const columns = getColumns();

    function getColumns() {
      return (customData && customData[0] && customData[0].overdue_money) ? ([{ title: '序号', dataIndex: 'key' }, {
        title: '逾期金额区间(元)', dataIndex: 'overdue_money'
      }, { title: '逾期时间', dataIndex: 'overdue_time' }, { title: '逾期时长', dataIndex: 'overdue_day' }, {
        title: '是否结清', dataIndex: 'settlement', render: (settlement) => {
          return (<>
            {settlement === 'N' ? '否' : null}
            {settlement === 'Y' ? '是' : null}
          </>)
        }
      }]) : ([{ title: '序号', dataIndex: 'key' }, { title: '逾期金额区间(元)', dataIndex: 'amount' }, {
        title: '逾期时间', dataIndex: 'date'
      }, { title: '逾期时长', dataIndex: 'count' }, {
        title: '是否结清', dataIndex: 'settlement', render: (settlement) => {
          return (<>
            {settlement === 'N' ? '否' : null}
            {settlement === 'Y' ? '是' : null}
          </>)
        }
      }]);
    }

    return (
      <div className={styles.overdueWrap}>
        <Descriptions column={2}>
          <Descriptions.Item
            label="近6个月逾期机构次数">{data.overdue_mechanism_number === '无记录' ? 0 : data.overdue_mechanism_number}</Descriptions.Item>
          <Descriptions.Item label="近6个月逾期总次数">{data.counts === '无记录' ? 0 : data.counts}</Descriptions.Item>
          <Descriptions.Item
            label="近6个月未结清逾期次数">{data.uncleared_counts === '无记录' ? 0 : data.uncleared_counts}</Descriptions.Item>
          <Descriptions.Item
            label="近6个月逾期总金额(元)">{data.overdue_money === '无记录' ? 0 : data.overdue_money}</Descriptions.Item>
        </Descriptions>
        <div className={styles.tableHeader}>
          <Table
            locale={{ emptyText: '暂无记录' }}
            bordered={true}
            columns={columns}
            dataSource={customData}
            pagination={false}
          />
        </div>
        <div
          className={styles.text}>说明：S/M表示逾期的期数。S代表现金贷的期数，1期=7天，S0表示不到7天、S1代表7-14天，以此类推；M代表消费分期的期数，1期=30天，M0表示不到30天，M1代表30-60天，以此类推。</div>
      </div>
    )
  }
}

export default Historyoverdue1;
